<template>
	<view>
		<!-- 标题 -->
		<view class="navbar">
			<u-icon @click="navigateBack" class="icon-left" name="arrow-left" color="#333" size="50"></u-icon>
			<text>被邀请绑定</text>
		</view>
		<view class="section">
			<text>绑定手机号</text>
			<input type="text" value="" placeholder="请输入手机号" maxlength="11"/>
			<input type="text" value="" placeholder="请输入验证码" maxlength="6" />
			<view v-show="showUp" @click="change">获取验证码</view>
			<view style="background-color: #fff;color: #000000;" v-show="!showUp" @click="change">已发送(<u-count-down :timestamp="timestamp" :show-days="false" :show-hours="false" :show-minutes="false"></u-count-down>)</view>
		</view>
		<view class="binding" @click="device"><text>确认并分享</text></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timestamp: 60,
				showUp:true
			}
		},
		methods: {
			navigateBack() {
				wx.reLaunch({
					url:'./binding'
				})
			},
			// 发送验证码
			change:function(){
				this.showUp = !this.showUp
			},
			//信息设备
			device() {
				wx.reLaunch({
					url:'/pages/login/binding/device/device'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// 头部
	.navbar{padding-top: 90rpx;padding-bottom: 80rpx;width: 750rpx;}
	.navbar > text{font-size: 36rpx;font-weight: bold;padding-left: 220rpx;color: #333;}
	.icon-left{margin-top: 20rpx;margin-left: 10rpx;}
	// 内容
	.section{padding: 30rpx;}
	.section > text{font-size: 40rpx;font-weight: bold;}
	.section > input{padding: 30rpx;padding-left:50rpx;background-color: rgb(246,247,251);border-radius: 50rpx;margin-top: 50rpx;}
	.section > view{border-radius: 50rpx;background-color: rgb(68,92,223);padding: 15rpx;font-size: 28rpx;width: 200rpx;text-align: center;color: #fff;
					position: absolute;top: 34%;right: 7%;z-index: 10000;}
	.binding {
		box-shadow: 1px 1px 2px rgb(228, 227, 227), 0 0 5px rgb(228, 227, 227), 0 0 1px rgb(228, 227, 227);
		border-radius: 50rpx;text-align: center;margin-bottom: 35rpx;padding: 20rpx;font-size: 36rpx;
		background-color: rgb(68,92,223);color: #fff;margin: 30rpx;margin-top: 200rpx;
	}
</style>
